<template>
  <div class="user">
    <!-- 左侧导航区 -->
    <div class="menu">
      <!-- 面包屑导航 -->
      <div class="bread_crumb">
        <el-breadcrumb>
          <el-breadcrumb-item :to="{ path: '/home' }">
            <SvgIcon name="home" width="14px" height="14px" />
            <SvgIcon
              name="line"
              width="14px"
              height="14px"
              style="margin: 0 5px"
            />
            <span class="title">会员中心</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 导航菜单 -->
      <el-menu
        :default-active="route.name"
        text-color="#7f7f7f"
        active-text-color="rgb(116, 200, 233)"
      >
        <el-menu-item
          v-for="item in menuList"
          :index="item.pathName"
          @click="goRoute"
        >
          <el-icon>
            <SvgIcon :name="item.svgName" width="18px" height="18px" />
          </el-icon>
          <span class="title">{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 左侧二级路由展示区 -->
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts" name="User">
import { reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 获取当前路由对象
const route = useRoute()
// 获取路由器对象
const router = useRouter()
// 存储菜单列表的信息
const menuList = reactive([
  {
    name: '实名认证',
    pathName: 'identification',
    svgName: 'identification-card',
  },
  { name: '挂号订单', pathName: 'order', svgName: 'registered-order' },
  { name: '就诊人管理', pathName: 'patient', svgName: 'client' },
  { name: '账号信息', pathName: 'account', svgName: 'account' },
  { name: '意见反馈', pathName: 'feedback', svgName: 'feedback' },
])
// 点击菜单路由跳转的回调 会自动注入el-menu-item实例 index属性存储的即为要跳转路由的名称
const goRoute = (vc: any) => {
  router.push({
    name: vc.index,
  })
}
</script>

<style scoped lang="scss">
.user {
  width: 100%;
  display: flex;
  .menu {
    flex: 2;
    // 面包屑导航样式
    .bread_crumb {
      margin: 10px 23px;
      .title {
        cursor: pointer;
        font-size: 15px;
        color: $base-color;
      }
    }
    // 导航菜单样式
    :deep(.el-menu-item) {
      font-size: 16px;
      .title {
        margin-left: 10px;
      }
    }
  }
  .content {
    flex: 10;
    margin: 20px;
  }
}
</style>
